<template>
  <div class="container">
    <el-card>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title" class="articles-title">
          <el-input v-model="ruleForm.title" placeholder="请输入标题" class="article-title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="ruleForm.articleBody" class="midle-quill"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="ruleForm.videoURL" placeholder="请输入视频" class="videostyles"></el-input>
        </el-form-item>
        <div class="middle">
          <el-button @click="addArticleData" type="primary">提交</el-button>
          <el-button @click="addHandleCloseData">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/articles'
export default {
  data() {
    return {
      // 新增form表单数据
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: '',
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
      },
    }
  },
  methods: {
    async addArticleData() {
      if (
        this.ruleForm.title == '' ||
        this.ruleForm.articleBody == '' ||
        this.ruleForm.videoURL == ''
      ) {
        this.$message('请输入数据')
        return
      }
      await add(this.ruleForm)
      this.$router.push('articles')
      this.ruleForm.title = ''
      this.ruleForm.articleBody = ''
      this.ruleForm.videoURL = ''
    },
    addHandleCloseData() {
      this.ruleForm.title = ''
      this.ruleForm.articleBody = ''
      this.ruleForm.videoURL = ''
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style scoped lang="less">
.middle  {
  transform: translateX(30%);
}
/* 增加对话框长度 */
.articles-title .el-input  {
  width: 620px !important;
}
/* 视频对话框长度 */
.videostyles {
  width: 620px !important;
}
.midle-quill  {
  width: 620px !important;
}
// .quill-editor {
//   min-height: 280px;
// }
.quill-editor {
  min-height: 280px;
}
/deep/.ql-container.ql-snow {
  height: 300px;
}
.article-title {
  width: 52%;
}
</style>